/**
 * 堆叠条形图组件
 * 水平堆叠条形图，用于展示多个数据系列的累积关系
 */

import React from 'react';
import { Bar } from 'react-chartjs-2';
import { ChartData, ChartOptions } from '../types';

interface StackedBarChartProps {
  data: ChartData;
  options?: ChartOptions;
  height?: number;
}

const StackedBarChart: React.FC<StackedBarChartProps> = ({
  data,
  options,
  height = 400,
}) => {
  // 将数据转换为堆叠格式
  const stackedData = {
    ...data,
    datasets: data.datasets.map(dataset => ({
      ...dataset,
      stack: 'stack',
    })),
  };

  const chartOptions: any = {
    ...options,
    indexAxis: 'y', // 水平方向
    scales: {
      x: {
        stacked: true,
        beginAtZero: true,
      },
      y: {
        stacked: true,
        beginAtZero: false,
      },
    },
  };

  return <Bar data={stackedData as any} options={chartOptions} height={height} />;
};

export default StackedBarChart;

